import React, { Component } from 'react';
import { CopyOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Upload, message } from 'antd';
import { FormComponentProps } from '@ant-design/compatible/es/form';

const { Dragger } = Upload;

interface ImportWhiteListProps extends FormComponentProps {
  ImportVisible: boolean;
  FetchAction: (typeName: string, payload: any) => void;
  ChangeImportWhiteListModal: (addVisible: boolean) => void;
}

interface ImportWhiteListState {
  fileList: any[];
}

class ImportWhiteListElem extends Component<ImportWhiteListProps, ImportWhiteListState> {
  state = {
    fileList: [],
  }

  handleImportWhiteList = () => {
    const { fileList }: any = this.state;
    const {
      FetchAction,
      ChangeImportWhiteListModal,
    } = this.props;
    if (fileList.length <= 0) message.error('请上传白名单文件');
    else {
      FetchAction('importWhiteList', fileList[0]);
      ChangeImportWhiteListModal(false);
      this.setState({ fileList: [] });
    }
  }

  clickUploadFile = ({ file, fileList }: any) => {
    this.setState({
      fileList: fileList.length > 0 ? [{
        name: file.name,
        uid: 1,
        file: file.originFileObj,
      }] : [],
    });
  }

  render() {
    const { fileList } = this.state;
    const { ImportVisible, ChangeImportWhiteListModal } = this.props;

    return (
      <Modal
        visible={ImportVisible}
        title="批量导入白名单"
        destroyOnClose
        onOk={this.handleImportWhiteList}
        onCancel={() => ChangeImportWhiteListModal(false)}
      >
        <Form hideRequiredMark className="tableListForm">
          <Form.Item className="UploadFormTZ">
            <Dragger
              accept=".xls,.xlsx,.pdf"
              fileList={fileList}
              listType="picture"
              onChange={this.clickUploadFile}
            >
              <p className="ant-upload-drag-icon"><CopyOutlined style={{ fontSize: 40 }} /></p>
              <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
              <p className="ant-upload-hint">支持扩展名：.xls,.xlsx,.pdf...</p>
            </Dragger>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<ImportWhiteListProps>()(ImportWhiteListElem);
